import React, { Component } from 'react';
import {
  StyleSheet, View, Text,
} from 'react-native';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: true,
    };
  }

  render() {
    return (
      <View style={styles.contain}>
        <View style={styles.container}>
          <Text style={[styles.title, this.state.isActive && styles.activeTitle]} />
        </View>
        <View style={styles.separator} />
      </View>
    );
  }
}
// 在数组中位置居后的样式对象比居前的优先级更高
const styles = StyleSheet.create({
  contain: {
    backgroundColor: 'yellow',
    flex: 1,
  },
  separator: {
    borderBottomColor: '#bbb',
    borderBottomWidth: StyleSheet.hairlineWidth, // HairlineWidth 线看起来会像头发丝一样细
  },
  container: {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
  },
  title: {
    fontSize: 19,
    fontWeight: 'bold',
  },
  activeTitle: {
    color: 'red',
  },
});
export default MyComponent;
